<template>
<div class="main">
  <div class="search">
          <form action="#" method="post" class="form">
              <input placeholder="请输入..." v-model="keyWord" name="keyword" type="text" class="input" id="search">
              
              <button type="submit" class="button" onclick="submitButton()"></button>
              <table v-show="keyWord">
                <tbody>
                  <tr v-for="(item,index) in filterList" :key="index">
                    <td>{{item.objectName}}</td>
                  </tr>
                </tbody>
              </table>
          </form>
          
          
          <div id="app">
            <a><button>人工客服</button></a>
            <div class="rect-container">
              <div class="">
                <div  class="rect" @click="faxian">
                  <img src="../assets/images/1.jpg" alt="" class="img1">
                  <div style="display: flex; flex-direction:column ; width: 100%; ">
                      <ul id="nav">
                        <li><a href="">推荐</a></li>
                        <li>|</li>
                        <li><a href="">关注</a></li>
                        <li>|</li>
                        <li><a href="">附近</a></li>
                      </ul>
                    <div  style="height: 60%;">
                      <div class="ban">
                        <p >发现</p>
                      </div>
                    </div>
                  </div>
                </div>
               <div  class="rect">
                <img src="../assets/images/3.png" alt="" class="img1" style="height:220px ;width: 220px; margin-top: 45px;">
                  <div style="display: flex; flex-direction:column ; width: 100%; ">
                    <div  style="height: 60%;">
                      <div class="ban2">
                        <p style="margin-top: 35px;margin-left: -10px;">个性化</p>
                      </div>
                    </div>
                      <div style="height: 50px; font-size: 28px; margin-right: 110px;margin-top: -20px;">
                        个性化商城
                      </div>
                      <div style="height: 50px; font-size: 28px; margin-left: 60px; margin-top: 5px;">
                        个性化设置
                      </div>
                    
                  </div>
               </div>
              </div>
              
              <div>
                <div  class="rect">
                  
                  <div style="display: flex; flex-direction:column ; width: 100%; ">
                      <ul id="nav" >
                        <li><a href="">我的服务</a></li>
                        <li>•</li>
                        <li><a href="">服务专区</a></li>
                      </ul>
                    <div  style="height: 60%;">
                      <div class="ban3">
                        
                        <p style="margin-right: 60px;">服务</p>
                      </div>
                    </div>
                  </div>
                  <img src="../assets/images/2.png" alt="" class="img1">
                </div>
                <div  class="rect">
                  
                  <div style="display: flex; flex-direction:column ; width: 100%; ">
                    <div  style="height: 60%;">
                      <div class="ban4">
                        <p style="margin-left: -75px; margin-top: 40px; font-size: 40px;">会员中心</p>
                      </div>
                    </div>
                      <div style="font-size: 25px;text-align: left;margin-left: 46px;height: 45px;">
                        热门岗位抢先推
                      </div>
                      <div style="font-size: 25px;text-align: left;margin-left: 46px; ;">
                        会员专属皮肤
                      </div>
                  </div>
                  <img src="../assets/images/5.png" alt="" class="img1" style="height:220px ;width: 220px; margin-top: 45px;margin-left: 10px;">
                </div>
              </div>
              
            </div>
          </div>
 </div>




    
    
        
        <div class="footer">
            <div class="footer-wai">
              <dl>
                  <dt>企业服务</dt>
                  <dd><a>职位搜索</a></dd>
                  <dd><a >新闻资讯</a></dd>
                  <dd><a >会员充值</a></dd>
              </dl>
              <dl >
                  <dt>使用与帮助</dt>
                  <dd ><a>规则协议</a></dd>
                  <dd><a >隐私政策</a></dd>
                  <dd><a >使用帮助</a></dd>
              </dl>
              <dl>
                  <dt>联系我们</dt>
                  
              </dl>
            </div>
            <div class="footer-wai">
              <span style="font-family: Georgia, 'Times New Roman', Times, serif;color: aqua;line-height: 45px;-webkit-margin-start: 2em; ">CROSSTREE</span>
            </div>
        </div>
        







</div>
</template>

<script>
import subunit from 'highlight.js/lib/languages/subunit';
import Navbar from '../layout/components/Navbar.vue'
import { listObject, getObject, delObject, addObject, updateObject } from "@/api/system/object";

export default {
  name: "Object",
  data() {
    return {
      keyWord: '',
				 list:[
				        { name: '张三', age: '18' },
				        { name: '张四', age: '17' },
				        { name: '张五', age: '17' },
				        { name: '老六', age: '18' },
				        { name: '老八', age: '18' },
				        { name: '小三', age: '19' },
				        { name: 'Xingyue', age: '18' }
				          ],
          
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 物品总览表格数据
      objectList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        objectName: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  
  created() {
    this.getList();
  },
  computed:{
			filterList(){
				return this.objectList.filter(item=>{
					return  item.objectName.indexOf(this.keyWord)!==-1;
				})
        
			}
		}
	,
  methods: {
    faxian(){
      this.$router.push("/job")
    },
    /** 查询物品总览列表 */
    getList() {
      this.loading = true;
      listObject(this.queryParams).then(response => {
        this.objectList = response.rows;
        this.total = response.total;
        console.log(this.objectList);
        this.loading = false;

      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        objectId: null,
        objectName: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    submitButton(){
      this.getList();
      document.getElementById("search");
      for (let index = 0; index < this.objectList.length; index++) {
        const element = array[index];
        if (element) {
        
      }
      }
      
    }
  }}
</script>

<style>
.main{
    height: 2000px;
    width: 100%;
    background: linear-gradient(0deg, #e9fcff 100%,#e9fbff 60%, #c6ecf6 0%);
}
.body{
    margin: 0;
    padding: 0;
    width: 1229px;
  }
  div.search {
              padding: 10px 0;
          }
   
          .form {
              position: relative;
              width: 300px;
              margin: 0 auto;  /*设置宽度后，居中*/
          }
   
          .input,.button {
              border: none;   /*无边框样式；元素的总宽度和高度包括边框的宽度 */
              outline: none;  /*无轮廓样式；轮廓是在元素周围绘制的一条线，在边框之外并且可能与其他内容重叠，以凸显元素，元素的总宽度和高度不受轮廓线宽度的影响。*/
          }
   
          .search input {
              width: 100%;
              height: 42px;
              padding-left: 13px;
              border: 2px solid #c5464a;
              border-radius: 19px;   /*border-radius 属性用于向元素添加圆角边框：*/
              background: transparent;  /*背景透明*/
          }
   
          .search button {
              height: 42px;
              width: 42px;
              cursor: pointer;  /*cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状*/
              position: absolute;
              background: #c5464a;
              border-radius: 0 19px 19px 0;
              width: 60px;
              right: 0;
          }
          .search button:hover {
              background-color: #c7585c;  /*点击搜索按钮时的背景颜色*/
          }
   
          /* 在<button>元素后面插入内容，并设置所插入内容的样式： */
          .search button:before {
              content: "搜索";  /*插入的内容*/
              font-size: 13px;  /*插入内容的字体大小*/
              color: #F9F0DA;  /*插入内容的字体颜色*/
          }


          #app {
            text-align: center;
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            
            color: #2c3e50;
  
  
}

.rect-container {
  justify-content:space-between ;
  margin: 40px 80px 0px 80px;
  padding: -2px 20px 0px 80px;
  display: flex;
  flex-direction: row;
  width: 80%;
  /* grid-template-columns: repeat(2, 1fr); */
  grid-gap: 60px;
  
}

.rect {
  display: flex;
  margin: 50px 0px 50px 0px;
  height: 350px;
  width:550px;
  text-align:center;
  line-height:80px;
  font-size: 40px;
  background-color: white;
  box-shadow:1px 2px 0.1em  #93989a;
  border-radius: 30px;
  color: black;
  overflow: hidden;
  
}

.img1{
  width: 280px;
  height: 280px;
  margin: 15px;
}
#nav{
  margin-left: -40px;
}
#nav li {
 display: inline;
 margin-right: 5px;
 font-size:24px ;                
 }
 .ban2{
  width: 200px;
  height: 190px;
  background-color: #555555;
  border-bottom-left-radius: 200px;
  float:right;
 }
 .ban4{
  width: 200px;
  height: 190px;
  background-color: #555555;
  border-bottom-right-radius: 200px;
  float:left;
 }
 .ban3{
  width: 200px;
  height: 190px;
  background-color: #555555;
  border-top-right-radius: 200px;
  float:left;
 }
 .ban{
  width: 200px;
  height: 200px;
  background-color: #555555;
  border-top-left-radius: 200px;
  float:right;
  /* transform: translateY(30px); */
  

 }
  p{
  font-size:48px ;
  color: cyan;
  margin-right: -50px;
  margin-top: 60px;
 }
 dd{
  margin-left: -17px;
  padding: 3px;
  font-size: 10px;
 }
 .footer{
  color: rgba(255, 255, 255, .5);
  background-color: #313438;
  font-size: 14px;
  width: 100%;
  height: 100px;
  display: flex;
 }
 dl{
  float: left;
  
  margin: 10px;
 }
 .footer-wai{
  display: flex;
  justify-content: center;
  width: 100%;
 }
</style> 


